<table *ngIf="dataSourceUdp.length" class="table" mat-table [dataSource]="dataSourceUdp">
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <ng-container matColumnDef="rport">
        <th mat-header-cell *matHeaderCellDef> Local port </th>
        <td mat-cell *matCellDef="let element"> {{element.rport}} </td>
    </ng-container>

    <ng-container matColumnDef="rhost">
        <th mat-header-cell *matHeaderCellDef> Type </th>
        <td mat-cell *matCellDef="let element"> {{element.rhost}} </td>
    </ng-container>

    <ng-container matColumnDef="lport">
        <th mat-header-cell *matHeaderCellDef> Remote port </th>
        <td mat-cell *matCellDef="let element"> {{element.lport}} </td>
    </ng-container>

    <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef> Actions </th>
        <td mat-cell *matCellDef="let element">
            <button mat-icon-button matTooltip="Delete port" (click)="delete(element)">
                <mat-icon aria-label="Delete port">delete</mat-icon>
            </button>
        </td>
    </ng-container>
    
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<br *ngIf="dataSourceUdp.length"/>
<mat-form-field class="form-field">
    <input 
        matInput type="text" 
        [(ngModel)]="newPort.name" 
        placeholder="Name">
</mat-form-field>
<mat-form-field class="form-field">
    <input 
        matInput type="number" 
        [(ngModel)]="newPort.lport" 
        placeholder="Local port">
</mat-form-field>
<mat-form-field class="form-field">
    <input 
        matInput type="text" 
        [(ngModel)]="newPort.rhost" 
        placeholder="Remote host">
</mat-form-field>
<mat-form-field class="form-field">
    <input 
        matInput type="number" 
        [(ngModel)]="newPort.rport" 
        placeholder="Remote port">
</mat-form-field>
<button mat-button class="form-field" (click)="onAddUdpInterface()">Add</button>
